<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录数据库</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<style>
    .forms {
        width: 400px;
        height: auto;
        margin: 0 auto;
        margin-top: 100px;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 20px;
    }

    .forms .title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .forms .input-group {
        margin-bottom: 20px;
    }

    .forms .input-group #button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: none;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }
</style>

<body>
    <div class="container bg">
        <div class="forms">
            <form>
                <div class="title">登录数据库</div>
                <div class="input-group">
                    <span class="input-group-text">主&emsp;机</span>
                    <input type="text" class="form-control" placeholder="localhost" value="localhost">
                </div>
                <div class="input-group">
                    <span class="input-group-text">用户名</span>
                    <input type="text" class="form-control" placeholder="root">
                </div>
                <div class="input-group">
                    <span class="input-group-text">密&emsp;码</span>
                    <input type="password" class="form-control" placeholder="password">
                </div>
                <div class="input-group">
                    <span class="input-group-text">端&emsp;口</span>
                    <input type="number" class="form-control" placeholder="3306" value="3306">
                </div>
                <div class="input-group">
                    <div id="button" onclick="submit()" class="btn btn-primary">登录</div>
                </div>
                <div class="alert alert-danger alert-dismissible" style="display: none;" id="tip">
                    <button type="button" class="btn-close" onclick="closetip()"></button>
                    <strong>错误!</strong>&emsp;<span id="error"></span>
                  </div>
            </form>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script>
        window.onload = function() {
            console.log("%c Freell %c https://freell.top ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
        }
        function submit() {
            $.ajax({
                url: "http://localhost:5000/",
                type: "POST",
                data: {
                    "host": $("input:eq(0)").val(),
                    "username": $("input:eq(1)").val(),
                    "password": $("input:eq(2)").val(),
                    "port": $("input:eq(3)").val()
                },
                dataType: "json",
                success: function(data) {
                    console.log(data)
                    if (data.status == 'error') {
                        console.log(data.error)
                        $("#tip").show();
                        $("#error").text(data.message);
                    } else {
                        window.location.href = "http://localhost:5000/";
                    }
                }
            });
        }

        function closetip() {
            $("#tip").hide();
        }
    </script>
</body>

</html>